<template>
  <div class="cesium-container" ref="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted, onBeforeUnmount, ref } from 'vue';
import 'cesium/Build/Cesium/Widgets/widgets.css';

// 创建一个对容器的引用
const cesiumContainer = ref(null);
let viewer = null;

onMounted(() => {
  // 初始化 Cesium Viewer
  viewer = new Cesium.Viewer(cesiumContainer.value, {
    terrainProvider: Cesium.createWorldTerrain() // 添加地形
  });

  // 隐藏 Home 按钮
  viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
    e.cancel = true;
  });

  // 添加一个实体
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655),
    point: {
      pixelSize: 5,
      color: Cesium.Color.RED
    }
  });

  // 设置相机位置
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 3000000),
    orientation: {
      heading: Cesium.Math.toRadians(0.0),
      pitch: Cesium.Math.toRadians(-90.0),
      roll: 0.0
    }
  });
});

onBeforeUnmount(() => {
  // 组件销毁前销毁 Cesium Viewer
  if (viewer) {
    viewer.destroy();
  }
});
</script>

<style scoped>
.cesium-container {
  width: 100%;
  height: 100vh;
}
</style>
